<script setup lang="ts">
import {useWindowResize} from "@/hooks/wind";
import {useLogin} from "@/apps/admin/hooks/login"
import {computed} from "vue"
import {useTransparencyDrawing} from "@/hooks/image";
import LoginAd from "./login-ad.gif"
import LoginBg from "./login-bg.webp"
import {useConfigure} from "@/apps/admin/hooks/configure"

const {conf} = useConfigure()

/**
 * 显示广告图
 */
const adImg = computed<string[]>(() => {
  if (conf.login_ad instanceof Array && conf.login_ad.length > 0) {
    return conf.login_ad
  }
  return [LoginAd]
})


/**
 * 显示背景图
 */
const bgImg = computed(() => {
  return conf.login_bg ? conf.login_bg : LoginBg
})


/**
 * 监控窗口大小
 */
const size = useWindowResize()

/**
 * 登录HOOK
 */
const {CodeData, getLoginCode, byPasswordLogin, PwdForm, loading} = useLogin()

/**
 * 是否是大窗口
 */
const maxwind = computed(() => {
  return size.width > 768
})

/**
 * 获取一个透明图片占位
 */
const DefImgCode: string = useTransparencyDrawing(100, 35)
</script>
<template>
  <div class="login-page" :style="{ backgroundImage: `url(${bgImg})` }">
    <div class="form-box flex-center" :style="maxwind ? '' : 'width:90%'">
      <div class="form-box-left" v-show="maxwind">
        <el-carousel style="height: 100%" height="100%" motion-blur>
          <el-carousel-item v-for="(src,k) in adImg" :key="k">
            <el-image loading="lazy" lazy alt="后台管理系统" :src="src"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="form-box-right" :style="maxwind ? '' : 'width:100%'">
        <h1>后台管理系统</h1>
        <el-form size="large" :model="PwdForm" label-position="top" class="form">
          <el-form-item prop="username">
            <el-input v-model.trim="PwdForm.account" :max-length="30" clearable show-word-limit placeholder="请输入登录账号">
              <template #prefix>
                <app-icon name="User"></app-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model.trim="PwdForm.password" :max-length="30" clearable show-word-limit placeholder="请输入密码" type="password">
              <template #prefix>
                <app-icon name="Key"></app-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="code-item" prop="code">
            <el-input :max-length="6" v-model.trim="PwdForm.code" clearable show-word-limit placeholder="请输入验证码">
              <template #prefix>
                <app-icon name="Picture"></app-icon>
              </template>
              <template #append>
                <img :src="CodeData.image?CodeData.image:DefImgCode" @click="getLoginCode" class="picture" alt="codeImg"/>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-button" long type="primary" size="large" :disabled="loading" @click="byPasswordLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="technical-support">技术支持:<span>ZLF</span></div>
  </div>
</template>
<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: var(--inner-height);
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .form-box {
    width: 900px;
    height: 450px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    align-items: center;

    .form-box-left {
      width: 60%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px 0 0 4px;
        user-select: none; //禁止复制
      }
    }

    .form-box-right {
      width: 40%;
      height: 100%;
      padding: 20px;
      margin-top: 60px;

      h1 {
        text-align: center;
        font-size: 1.6rem; /* 设置文字大小 */
        font-weight: bold; /* 加粗字体 */
        background: linear-gradient(to right, #b1bcf6, #7e8cda, #5b73df, #4160ff);
        -webkit-background-clip: text; /* 使用背景裁剪 */
        color: transparent; /* 将文字颜色设置为透明，让背景渐变显示 */
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); /* 可选：添加文字阴影 */
      }

      .form {
        margin-top: 30px;

        .el-form-item {
          margin-bottom: 35px;
          flex-wrap: wrap;

          &.code-item {
            :deep(.el-form-item__content) {
              .el-input {
                .el-input-group__append {
                  padding: 1px;
                }
              }
            }
          }

          .picture {
            width: 100px;
            height: 35px;
            cursor: pointer;
          }

          .login-button {
            text-indent: 10px;
            letter-spacing: 10px;
            height: 42px;
            font-size: 18px;
            width: 100%;
          }
        }
      }
    }
  }

  .technical-support {
    position: absolute;
    bottom: 20px;
    font-size: 18px;
    color: white;

    span {
      cursor: pointer;
    }
  }
}
</style>